<template>


    <div>
        <div>
            <div class="arrowsBox">

                <div class="arrowsItem" v-for="(item, index) in progressOptions" :key="index">
                    <div class="arrows-up arrows" :class="{
                    arrows_active: item.value === step,
                    arrows_todo: item.value > step,
                }"></div>
                    <div class="arrows-down arrows" :class="{
                    arrows_active: item.value === step,
                    arrows_todo: item.value > step,
                }"></div>
                    <div class="arrows-label" :class="{
                    arrows_label_active: item.value === step,

                }">
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </div>
        <a-row class="flex items-center">

        </a-row>
    </div>

</template>
<script setup>
import { progressOptions, roles, tbtypes, xmtypes } from '@/utils/constants.js'
const props = defineProps({
    proId: {
        type: Number,
    },
})
const { proId } = toRefs(props)
const step = ref("3")
const getStep = (pId) => {
    console.log("fatch proId", pId)
}
const emits = defineEmits(['onClose'])
const onClose = (refresh) => {
    emits('onClose', refresh)
};


watch(proId, () => {
    getStep(proId.value);
});

</script>
<style scoped>
.arrowsBox {
    display: flex;
    justify-content: center;
    height: 40px;
    margin: 10px;
    font-weight: bold;
}

.arrowsItem {
    position: relative;
    height: 100%;
    width: 140px;
    margin-right: 4px;
}

.arrows-up {
    transform: skewX(30deg);
}

.arrows-down {
    transform: skewX(-30deg);
}

.arrows {
    height: 50%;

    background: #43C7C2;
}

.arrows-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #fff;
    font-size: 11px;
}

.arrows_done {
    background: #edf9ff;
}

.arrows_active {
    background: #3B87F7 ;
}

.arrows_todo {
    /* background: #C0DDFC; */
    background: #43C7C2;
    opacity: 0.4;
}

 
.arrows_label_active {
    color: #fff;
}

.arrows_label_todo {
    color: #929393;
}

.btn {
    background: #009fe9;
    color: #fff;
    border: none;
    padding: 6px;
    width: 100px;
    border-radius: 4px;
    margin: auto;
    display: block;
}
</style>